<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery动画</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css"/>
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>

    <script type="text/javascript">
        $(function (){
            //显示 show()
            $("#btn1").click(function (){
                $("#div1").show(1000);
            });

            //隐藏hide()
            $("#btn2").click(function (){
                $("#div1").hide(1000);
            });

            //切换 toggle()
            $("#btn3").click(function (){
                $("#div1").toggle(1000);
            });


            //淡入 fadeIn()
            $("#btn4").click(function (){
                $("#div1").fadeIn(500);
            });

            //淡出 fadeOut()
            $("#btn5").click(function (){
                $("#div1").fadeOut(500);
            });

            //淡化到 fadeTo()
            $("#btn6").click(function (){
                $("#div1").fadeTo(2000,0.5,function (){
                    alert("fadeTo完成");
                });
            });

            //淡化切换 fadeToggle()
            $("#btn7").click(function (){
                $("#div1").fadeToggle(1000,function (){
                    alert("fadeToggle完成");
                });
            });


        })

    </script>

</head>
<body>
<p id="text_show">
    jquery动画<br/>
    基本动画<br/>
    show()  将隐藏的元素显示<br/>
    hide()  将可见的元素隐藏<br/>
    toggle() 可见就隐藏,不可见就显示<br/>
    以上动画方法都可以添加参数<br/>
        (1).第一个参数是动画,执行的时长,以毫秒为单位<br/>
        (2).第二个参数是动画的回调函数(动画完成后自动调用的函数)<br/>
    <br/>
    淡入淡出动画<br/>
    fadeIn() 淡入(慢慢可见)<br/>
    fadeOut() 淡出(慢慢消失)<br/>
    fadeTo() 在指定时长内慢慢的将透明度修改到指定的值,0：透明 , 1:完全可见,0.5 半透明<br/>
    fadeToggle() 淡入/淡出 切换<br/>

</p>



<table style="float: left">
    <tr>
        <td><button id="btn1">显示show()</button></td>
    </tr>
    <tr>
        <td><button id="btn2">隐藏hide()</button></td>
    </tr>
    <tr>
        <td><button id="btn3">显示/隐藏切换toggle()</button></td>
    </tr>
    <tr>
        <td><button id="btn4">淡入fadeIn()</button></td>
    </tr>
    <tr>
        <td><button id="btn5">淡出fadeOut</button></td>
    </tr>
    <tr>
        <td><button id="btn6">淡化到fadeTo()</button></td>
    </tr>
    <tr>
        <td><button id="btn7">淡化切换fadeToggle()</button></td>
    </tr>
    <div id="div1" style="float: left;border: 1px solid;background-color: blue;width: 300px;height: 200px">

    </div>
</table>
</body>
</html>